<template>
	<div class="IndexSwiper">
		<h1>首页攻略</h1>
		<el-row class="addBtn clear_fix">
		<!--添加按钮-->
			<el-button class="addImg" type="primary" @click="dialogFormVisible = true">添加</el-button>
		</el-row>
		
	<!--首页头部-->
	<el-table :data="tableData">
	    
	    <el-table-column
	      label="时间"
	      >
	      <template slot-scope="scope">
	      	<p>{{scope.row.time_string}}</p>
	      </template>
	    </el-table-column>
	     <el-table-column
	      label="景点名"
	      >
	      <template slot-scope="scope">
	        <p>{{scope.row.name}}</p>
	      </template>
	    </el-table-column>
	    <el-table-column label="图片">
	      <template slot-scope="scope">
	        <span style="margin-left: 10px">
	        	<div class="indImg"><img :src="baseUrl+scope.row.img_url"/></div>
	        </span>
	      </template>
	    </el-table-column>
	    <el-table-column label="操作">
	      <template class="el-table__row" slot-scope="scope">
	           <el-button
	          size="medium"
	          type="danger"
	          @click="handleDelete(scope.$index, scope.row)">删除</el-button>
      		</template>
    </el-table-column>
  </el-table>
  
  <!--弹窗-->
	  <el-dialog title="添加首页攻略" :visible.sync="dialogFormVisible">
	  	
		<!--选择时间框-->
		<div class="urlBox">
			<div class="upload">时间</div>
			<template>
			  <el-select v-model="value" @change="seleBtn(options[value-1].label)" placeholder="请选择" :picker-options="{
			    start: '08:30',
			    step: '00:15',
			    end: '18:30'
			  }">
			    <el-option
			      v-for="item in options"
			      :key="item.value"
			      :label="item.label"
			      :value="item.value"
			      :disabled="item.disabled"
			      >
			    </el-option>
			  </el-select>
			</template>
		</div>
		<!--链接地址-->
			<el-form   :model="ruleForm" :rules="rules" ref="ruleForm" label-width="100px" class="urlBox">
					<el-form-item label="景点名"  prop="name">
							<el-input v-model="ruleForm.name"></el-input>
					</el-form-item>
					
			<!-- <div class="urlBox">
				<div class="upload">景点名</div>
				<el-input v-model="input" placeholder="请输入内容"></el-input>
			</div> -->
			<!--图片上传-->
				<div class="uploadBox">
					<div class="upload">图片上传</div>
					<el-upload
					class="upload-demo"
					ref="upload"
					action=""
					:file-list="fileList"
					:auto-upload="false"
					:on-change='changeUpload'
					>
					<el-button slot="trigger" size="small" type="primary">选取文件</el-button>
					<el-button style="margin-left: 10px;" size="small" type="success" @click="submitUpload">上传到服务器</el-button>
					<div slot="tip" class="el-upload__tip">只能上传jpg/png文件，每次只能上传一张,最大不超过5mb</div>
					<div  slot="tip" v-if="remin" class="remin">请选择背景图</div>
				</el-upload>
			</div>
			
			<el-form-item> 
						<el-row class="swiperBtn" >
							<!-- <div slot="footer" class="dialog-footer swiperBtn"> -->
								<el-button type="primary" @click="subBtn('ruleForm')">立即提交</el-button>
							<!-- </div> -->
						</el-row>
			</el-form-item>
		</el-form>
  </el-dialog>
  
</div>
</template>

<script>
	export default {
	    data() {
	      return {
			//表格数据
	        tableData: [],
	        dialogFormVisible: false,
	        baseUrl:"http://yaochiwan2.bluej.cn",
	      	//单选框
	        radio:'1',
					//链接地址
					ruleForm: {
						name: '',
					},
					rules: {
						name: [{
								required: true, message: '请输入景点名称', trigger: 'blur'
						}],
					},
	        input: '',
	        value1: '',
	        //时间选择
	        options: [{
		          value: '1',
		          label: '00:00'
		        }, {
		          value: '2',
		          label: '00:30'
		        }, {
		          value: '3',
		          label: '01:00'
		        }, {
		          value: '4',
		          label: '01:30'
		        }, {
		          value: '5',
		          label: '02:00'
		        }, {
		          value: '6',
		          label: '02:30'
		        }, {
		          value: '7',
		          label: '03:00'
		        }, {
		          value: '8',
		          label: '03:30'
		        }, {
		          value: '9',
		          label: '04:00',
		          
		        }, {
		          value: '10',
		          label: '04:30'
		        }, {
		          value: '11',
		          label: '05:00'
		        }, {
		          value: '12',
		          label: '05:30'
		        }, {
		          value: '13',
		          label: '06:00'
		        }, {
		          value: '14',
		          label: '06:30'
		        }, {
		          value: '15',
		          label: '07:00',
		          
		        }, {
		          value: '16',
		          label: '07:30',
		         
		        }, {
		          value: '17',
		          label: '08:00',
		          
		        }, {
		          value: '18',
		          label: '08:30',
		         
		        }, {
		          value: '19',
		          label: '09:00'
		        }, {
		          value: '20',
		          label: '09:30'
		        }, {
		          value: '21',
		          label: '10:00'
		        }
		        , {
		          value: '22',
		          label: '10:30'
		        }
		        , {
		          value: '23',
		          label: '11:00'
		        }
		        , {
		          value: '24',
		          label: '11:30'
		        }
		        , {
		          value: '25',
		          label: '12:00'
		        }, {
		          value: '26',
		          label: '12:30'
		        }, {
		          value: '27',
		          label: '13:00'
		        }, {
		          value: '28',
		          label: '13:30'
		        }, {
		          value: '29',
		          label: '14:00'
		        } , {
		          value: '30',
		          label: '14:30'
		        }, {
		          value: '32',
		          label: '15:00'
		        }, {
		          value: '33',
		          label: '15:30'
		        }, {
		          value: '34',
		          label: '16:00'
		        }, {
		          value: '35',
		          label: '16:30'
		        }, {
		          value: '36',
		          label: '17:00'
		        }, {
		          value: '37',
		          label: '17:30'
		        }, {
		          value: '38',
		          label: '18:00'
		        }, {
		          value: '39',
		          label: '18:30'
		        }, {
		          value: '40',
		          label: '19:00'
		        }, {
		          value: '41',
		          label: '19:30'
		        }, {
		          value: '42',
		          label: '20:00'
		        }, {
		          value: '43',
		          label: '20:30'
		        }, {
		          value: '44',
		          label: '21:00'
		        }, {
		          value: '45',
		          label: '21:30'
		        }, {
		          value: '46',
		          label: '22:00'
		        }, {
		          value: '47',
		          label: '22:30'
		        }, {
		          value: '48',
		          label: '23:00'
		        }, {
		          value: '49',
		          label: '23:30'
		        }],
		        value: '1',
		        time:"",
				//实例化上传图片方法
				updateImg:this.$config.uploadImg,
				formData:new FormData,
				fileList:[],
				
				//上传图片路径
				imgUrl:'',
				timeArr:[],//使用过的时间
				remin:false
		      }
		    },
	     methods: {
				 //成功提醒
					message(){
							this.$notify({
							title: '成功',
							message: '图片上传成功',
							type: 'success',
							duration:2000
						});
					},
				 	//提交成功
					succmsg(){
						this.$message({
							message: '提交成功',
							type: 'success'
						});
					},
						//失败提醒
					error(){
						this.$message({
							message: '提交失败',
							type: 'error'
						});
					},
	     	//操作按钮


		      //删除
		      handleDelete(index, row) {

						this.$confirm('此操作将永久删除该文件, 是否继续?', '提示',{
							confirmButtonText: '确定',
							cancelButtonText: '取消',
							type: 'warning',
				
						}).then((res) => {
							// this.delid = id
							this.$message({
								type: 'success',
								message: '删除成功!',
							});
							this.$require.post(this.$config.indexDelTips,{
									id:row.id
							})
							.then((res)=>{
									this.getList()
								})
							
						})
						.catch(() => {
							this.$message({
								type: 'info',
								message: '已取消删除'
							})
							this.getList()
						});

		  	},
      
		      //上传按钮
		      submitUpload() {
		        this.$require.post(this.$config.uploadImg,this.formData)
					.then((res)=>{
						this.message();
						if(res.data.data.img_url!=undefined){
							this.imgUrl=res.data.data.img_url
						}else{
							this.imgUrl=res.data.data.img_url_array[res.data.data.img_url_array.length-1]
						}
					})
		      },
		      handleRemove(file, fileList) {
		        console.log(file, fileList);
		      },
		      handlePreview(file) {
		        console.log(file);
		      },
		      
		      //请求数据
		      getList(){
	      	 	this.$require.get(this.$config1.index_tipsList)
		    		.then((res)=>{
		    			console.log(res)
							this.tableData=res.data.data.rows
							//循环检查时间是否被使用
							for(let i=0;i<this.options.length;i++){
							for(let j=0;j<res.data.data.rows.length;j++){
								if(this.options[i].label==res.data.data.rows[j].time_string){
									console.log(this.options[i].label);
									this.options[i].disabled=true//添加一个属性
								}
							}
						}
							console.log(this.timeArr)
		    			console.log(this.tableData)
		    		})
		    		.catch((err)=>{
		    			console.log("请求失败")
		    		})
	      	},
	      	seleBtn(idx){
	      		this.time=idx
	      	},
	      	changeUpload(file,fileList){
	      		this.formData.append("files",file.raw);
	      		console.log(this.formData)
	      	},
	      	subBtn(formName){
						this.$refs[formName].validate((valid) => {
							//判断输入框和上传图片是否为空
								if (valid && this.imgUrl !="") {
									this.remin=false;
									this.succmsg();
									this.dialogFormVisible = false;
									this.$require.post(this.$config.indexTips,{
											img_url:this.imgUrl,
											name:this.ruleForm.name,
											time_string:this.time
									})
									.then((res)=>{
										this.$refs[formName].resetFields();
										this.getList()
									})
								}else {
									this.error();
									this.remin=true
									return false;
								}
							});
	      	}
	      	
		      
	     },
      	 created(){
      	 	this.getList()
      	 	console.log(1111)
      	 }
		      
    
   	}
</script>

<style lang="scss" scoped>
	.IndexSwiper{
		margin: 20px auto 0px;
		/*width:%;*/
		height: 100%;
		padding: 0 30px;
		h1{
			font-size: 32px;
		}
	}
	.addBtn{
		margin-top: 20px;
	}
	.indImg{
		width:100px;
		height: 115px;
		img{
			width: 100%;
		}
	}
	.addImg{
		float: left;
	}
	.selectType{
		float: right;
	}
	.el-dialog__title {
	    line-height: 30px;
	    font-size: 25px !important;
	    color: #303133;
	}
	.uploadBox{
		display: flex;
		align-content: flex-start;
		margin-top: 20px;
		
	}
	.upload{
		width: 100px;
		height: 30px;
		display: inline-block;
		vertical-align: top;
		font-size: 14px;
		color: #606266;
		font-weight: 700;
		line-height: 30px;
	}
	.upload:before{
	    content: "*";
	    color: #f56c6c;
	    margin-right: 4px;
	}
	.upload-demo{
		display: inline-block;
	}
	.urlBox{
		// display: flex;
		// align-items: center;
		// align-content: space-between;
		margin-top: 20px;
	}
	.el-input{
		display: inline-block;
		width: 80%;
	}
	.swiperBtn {
		margin-top: 20px;
	}
	.remin{
		line-height: 20px;
		font-size: 12px;
		color: #F56C6C;
	}

</style>